@directive dynamic role;
@var content = {
<style>
    .table-no-left-right-border thead tr th {
        text-align: left;
    }

    .table-no-left-right-border thead tr td {
        text-align: left;
    }
</style>
<div class="panel panel-success">
    <div class="panel-body">
        <form class="form-horizontal" role="form" id="edit-form">
            <input type="hidden" name="id" id="id" value="${role.id}">
            <div class="form-group">
                <label class="col-sm-2 control-label">角色名称</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="name" name="name"
                           placeholder="输入角色名称" required data-bv-notempty-message="角色名称不为空"
                           pattern="^.{2,10}$" data-bv-regexp-message="角色名称在两到十个字符之间"
                           value="${role.name}" readonly/>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">代码</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="code" name="code"
                           placeholder="输入代码，供程序调用" required data-bv-notempty-message="代码不为空"
                           pattern="^.{2,10}$" data-bv-regexp-message="代码在两到十个字符之间"
                           value="${role.code}" readonly/>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">描述</label>
                <div class="col-sm-8">
                    <textarea class="form-control" id="represent" name="represent"
                              placeholder="输入描述" required data-bv-notempty-message="描述不为空"
                              pattern="^.{2,1000}$" data-bv-regexp-message="描述在两到一千个字符之间"
                              readonly>${role.represent}</textarea>
                </div>
            </div>
        </form>
        <div id="roleSettingTable"></div>
    </div>
    <div class="panel-footer">
        <div class="row">
            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">

            </div>
            <div class="text-center col-xs-4 col-sm-4 col-md-4 col-lg-4">

            </div>
            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-right">
                <button class="btn btn-success" id="btn-edit" onclick="view.submit();">保存</button>
                <button class="btn btn-warning" id="btn-close" onclick="parent.table.bootstrapTableExtension('close');">
                    取消
                </button>
            </div>
        </div>

    </div>
    <script type="text/javascript">
        $(function () {
            view.init();
        });
        var view = {
            table: null,//表格对象
            dataUrl: '/sys/role/menu/${role.id}',//数据加载地址
            saveUrl: '/sys/role/roleSetting/${role.id}',//删除数据地址
            selectedData: null,//选中的数据
            id: 0,//操作数据的主键
            defaultColumns: function () {
                var that = this;
                //表头数据列
                return [
                    {field: 'selectItem', checkbox: true, checked: 'hasPermission'},
                    {field: 'name', title: '名称'},
                    {
                        field: 'isMenu', title: '是否菜单', formatter: function (arg) {
                            if (arg === 0) {
                                return '否';
                            } else if (arg === 1) {
                                return '是';
                            } else {
                                return '其他';
                            }
                        }
                    }, {
                        field: 'icon', title: '图标', formatter: function (arg) {
                            return "<i class='" + arg + "'></i>";
                        }
                    },
                    {field: 'moduleName', title: '模块名称'},
                    {field: 'actionName', title: '控制器名称'},
                    {field: 'functionName', title: '方法名称'},
                    {
                        field: 'createTime', title: '创建时间', align: 'center', sortable: false,
                        formatter: function (arg) {
                            return arg.slice(0, 10) + " " + arg.slice(11, 20);
                        }
                    },
                    {
                        field: 'updateTime', title: '修改时间', align: 'center',
                        formatter: function (arg) {
                            return arg.slice(0, 10) + " " + arg.slice(11, 20);
                        }
                    },
                ];
            },
            init: function () {
                var that = this;
                that.table = $('#roleSettingTable').bootstrapTableExtension({
                    type: 'tree',
                    dataUrl: that.dataUrl,
                    columns: that.defaultColumns(),
                    isShowToolbar: false,
                    saveStateName: 'tree-grid-state-menu-role',
                    saveState: false
                });
            },
            submit: function () {
                var obj = this.table.bootstrapTreeTable('getSelections');
                console.log(obj);
                if (obj.length < 1) {
                    layer.msg('请至少勾选一项菜单', {icon: 2});
                    return false;
                }
                var menuIds = [];
                for (var i = 0; i < obj.length; i++) {
                    menuIds.push(obj[i].id);
                }
                console.log(menuIds);
                $('#btn-edit').attr('disabled', 'disabled');
                $.ajax({
                    url: view.saveUrl,
                    type: 'post',
                    dataType: 'json',
                    data: {
                        menuIds: menuIds
                    },
                    success: function (data) {
                        console.log(data);
                        if (data.status) {
                            layer.msg(data.msg, {icon: 1});
                            //wpgaci.goUrl('/sys/role/index', 1.5);
                            parent.table.bootstrapTable('refresh');
                            setTimeout(function () {
                                parent.table.bootstrapTableExtension('close');
                            }, 1500);
                        } else {
                            layer.msg(data.msg, {icon: 2});
                            $('#btn-edit').removeAttr('disabled');
                        }
                    },
                    error: function () {
                        layer.msg('网络错误，请稍后再试', {icon: 2});
                        $('#btn-edit').removeAttr('disabled');
                    }
                });
            }
        };
    </script>
</div>
@};
@include('../../layout/_open_content.html',{content:content}){}